<template>
  <div class='my-article' v-if="articleInfo.title">
    <div class="top">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: `/column/${articleInfo.column_id}` }">专栏首页</el-breadcrumb-item>
        <el-breadcrumb-item>{{ articleInfo.title }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <img :src="articleInfo.cover" alt="">
    <h1>{{ articleInfo.title }}</h1>
    <div class="userinfo">
      <div>
        <img :src="articleInfo.user.avatar" alt="">
        <div>
          <p>{{ articleInfo.user.nickname }}</p>
          <p>{{ articleInfo.user.description }}</p>
        </div>
      </div>
      <div>
        <p class="time">发表于: &nbsp;&nbsp;{{ articleInfo.createdAt | timeFormat }}</p>
      </div>
    </div>
    <p class="excerpt">{{ articleInfo.excerpt }}</p>
    <p class="content" v-html="articleInfo.content"></p>
  </div>
</template>

<script>
import { getArticleInfo } from '@/api/article'

export default {
  name: 'MyArticle',
  data () {
    return {
      articleId: 0,
      articleInfo: {
        title: ''
      }
    }
  },
  components: {},
  methods: {
    async getAtricle () {
      const res = await getArticleInfo(this.articleId)
      if (res.code === 0) {
        this.articleInfo = res.data
      } else {
        this.$message.error(res.msg)
      }
    }
  },
  created () {
    this.articleId = this.$route.params.articleId
    this.getAtricle()
  },
  mounted () { }
}
</script>

<style lang='less' scoped>
.my-article {
  width: 980px;
  margin: 0 auto;

  &>img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 5px;
  }

  &>h1 {
    font-size: 32px;
    font-weight: 500;
    padding: 20px 0;
  }
}

.top {
  padding: 30px 0;
}

.el-breadcrumb {
  font-size: 14px;
}

.userinfo {
  display: flex;
  height: 80px;
  padding: 10px 5px;
  align-items: center;
  border-top: 1px solid rgb(233, 228, 228);
  border-bottom: 1px solid rgb(233, 228, 228);
  div:nth-child(1) {
    flex:1;
    display: flex;
    align-items: center;
    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      vertical-align: middle;
      margin-right: 10px;
    }
    p {
      font-size: 16px;

      &:nth-child(2) {
        font-size: 14px;
        color: #6c757d;
      }
    }
  }

  .time {
    flex: 1;
    font-size: 15px;
    color: #6c757d;
  }
}
.excerpt, .content {
  font-size: 16px;
  color: #212529;
}

.excerpt {
  padding: 50px 0;
  font-weight: 600;
}

.content {
  padding-bottom: 100px;
}
</style>
